<!--
 * @Author: gitee 1758024667@qq.com
 * @Date: 2023-03-18 22:23:27
 * @LastEditors: gitee 1758024667@qq.com
 * @LastEditTime: 2023-04-04 16:34:16
 * @FilePath: \parking-lot-front-desk\src\views\Order\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 订单详情 -->
    <div style="font-size: 24px; margin: 24px">
      订单号：{{ this.list.id }}
      <div>
        订单状态：
        <van-tag type="success" v-if="this.list.status == 3" size="large"
          >订单已完成</van-tag
        >
        <van-tag type="danger" v-if="this.list.status == 2" size="large"
          >未支付订单</van-tag
        >
        <van-tag type="primary" v-if="this.list.status == 1" size="large"
          >车辆尚未离开</van-tag
        >
      </div>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 8px' }"
      >
      </van-divider>
    </div>
    <!-- 订单内容显示 -->
    <div
      style="
        width: 90%;
        position: relative;
        left: 5%;
        border-radius: 15px 15px 15px 15px;
        font-size: 18px;
      "
    >
      <van-cell-group inset>
        <van-cell title="车牌号" :value="this.list.carNumber" />
        <van-cell title="金额" :value="this.list.money" />
        <van-cell title="订单开始时间" :value="this.list.startTime" />
        <van-cell title="订单结束时间" :value="this.list.endTime" />
        <van-cell title="用户名" :value="this.list.username" />
        <van-cell title="停车场" :value="this.list.parkingId" />
        <van-cell title="停车位编号" :value="this.list.positionId" />
      </van-cell-group>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        >订单存在疑问请联系客服</van-divider
      >
    </div>
    <!-- 操作按钮 -->

    <div
      style="
        width: 90%;
        position: relative;
        left: 5%;
        height: 10vh;
        border-radius: 15px 15px 15px 15px;
      "
    >
      <van-button
        type="info"
        style="margin-top: 5%; margin-left: 5%"
        @click="tips()"
        >联系客服</van-button
      >
      <van-button
        type="primary"
        v-if="this.list.status == 1"
        style="margin-top: 5%; margin-left: 35%"
        @click="finishOrder"
        >结束订单</van-button
      >
      <van-button
        type="primary"
        v-if="this.list.status == 2"
        style="margin-top: 5%; margin-left: 35%"
        @click="payForOrder"
        >支付订单</van-button
      >
      <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '30%' }"
      >
        <van-nav-bar title="温馨提示" />
        <div
          style="
            position: relative;
            text-align: center;
            margin-top: 10%;
            color: brown;
            font-size: 28px;
          "
        >
          订单问题请联系管理员
        </div>
        <div
          style="
            position: relative;
            text-align: center;
            margin-top: 5%;
            color: brown;
            font-size: 28px;
          "
        >
          联系电话：13128552370
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  getOrderById,
  finishOrder,
  payForOrder,
  selectById,
} from "@/api/detail.js";
import { delay } from "q";
import { Toast } from "vant";
export default {
  data() {
    return {
      list: [],
      show: false,
    };
  },

  created() {
    this.init();
  },

  methods: {
    // 支付订单
    async payForOrder() {
      const result = await payForOrder(this.$route.params.id);
      console.log(result);
      this.init();
      Toast({
        message: "订单支付成功，请在15分钟内驶离",
        position: "top",
      });
    },
    // 结束订单
    async finishOrder() {
      const result = await finishOrder(this.$route.params.id);
      console.log(result);
      this.init();
      Toast({
        message: "订单已结束",
        position: "top",
      });
    },
    // 提示（显示客服电话）
    tips() {
      this.show = true;
    },
    // 返回上一级
    onClickLeft() {
      this.$router.go(-1);
    },
    // 初始化数据
    init() {
      this.getOrderById();
    },
    async getOrderById() {
      const orderid = this.$route.params.id;
      console.log(orderid);
      await getOrderById(orderid).then((result) => {
        selectById(result.data.data.userId).then((res) => {
        this.list = result.data.data
        this.list.username = res.data.data.username;
      });
      });
    },
    async selectById(id) {
      await selectById(id).then((res) => {
        this.list.username = res.data.data.username;
      });
    },
  },
};
</script>
<style scoped lang='less'>
.van-nav-bar {
  background: aliceblue;

  /deep/ .van-nav-bar__title {
    color: black;
  }
}
</style>